import { useI18n } from 'vue-i18n'

import { UserItem } from '@/apis/user/type/vo'
import { DetailsList } from '@/types/interface'
import { sexMap, statusMap } from '@/types/map'

export function useDetails() {
  const { t } = useI18n()

  // 详情显示
  const detailsShow = ref(false)

  // 详情数据
  const detailsData = ref<Partial<UserItem>>({})

  // 详情表单
  const detailsDataList = computed((): DetailsList<UserItem> => {
    return [
      {
        key: 'id',
        label: 'id',
        value: detailsData.value.id,
      },
      {
        key: 'username',
        label: t('common.username'),
        value: detailsData.value.username,
      },
      {
        key: 'sex',
        label: t('user.sex'),
        value: detailsData.value.sex && t(sexMap[detailsData.value.sex].text),
      },
      {
        key: 'nick_name',
        label: t('user.nick_name'),
        value: detailsData.value.nick_name,
      },
      {
        key: 'phone',
        label: t('user.phone'),
        value: detailsData.value.phone,
      },
      {
        key: 'email',
        label: t('user.email'),
        value: detailsData.value.email,
      },
      {
        key: 'status',
        label: t('common.status'),
        value: detailsData.value.status && t(statusMap[detailsData.value.status].text),
      },
      {
        key: 'remark',
        label: t('common.remark'),
        value: detailsData.value.remark,
      },
      {
        key: 'create_time',
        label: t('common.create_time'),
        value: detailsData.value.create_time,
      },
      {
        key: 'update_time',
        label: t('common.update_time'),
        value: detailsData.value.update_time,
      },
    ]
  })

  return {
    detailsShow,
    detailsData,
    detailsDataList,
  }
}
